<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>素材中心</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item>素材中心</el-breadcrumb-item>
                    <el-breadcrumb-item>视频</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="resource-video" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <div class="page-main">
            <div class="admin-panel padding-20">
                <div style="margin: 10px 0">
                    <el-button size="small" type="primary" @click="showUploadVideoDialog">上传视频</el-button>
                </div>
                <el-table :data="video.list" stripe border>
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column label="视频" width="200">
                        <template slot-scope="scope">
                            <video x5-playsinline="true" x5-video-player-type="h5" width="160" height="90" :src="scope.row.url"></video>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称">
                        <template slot-scope="scope">
                            <h3>{{scope.row.name}}</h3>
                            <small> {{scope.row.duration | duration}} </small>
                        </template>
                    </el-table-column>
                    <el-table-column label="大小" width="140">
                        <template slot-scope="scope">
                            {{scope.row.size | size}}
                        </template>
                    </el-table-column>
                    <el-table-column label="上传时间" width="140" align="center">
                        <template slot-scope="scope">
                            {{scope.row.createdTime | date}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-link type="primary" size="small" @click="viewResource(scope.row)" :underline="false" style="margin-right: 20px">预览</el-link>
                            <el-popconfirm title="确定删除吗？" @confirm="deleteResource(scope.row)">
                                <el-link slot="reference" type="danger" size="small" :underline="false">删除</el-link>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination :current-page="video.page"
                               :page-size="video.size"
                               :total="video.total"
                               :hide-on-single-page="true"
                               @current-change="loadVideo"
                               layout="total, prev, pager, next, jumper"
                               class="mm_pagination"
                               background>
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog title="上传视频（最多一次上传1个视频）" :visible.sync="uploadVideoDialog.show" width="500px" :close-on-click-modal="false" :before-close="hideUploadVideoDialog">
        <div>
            <el-upload
                    ref="videoUploader"
                    action="/admin/resource/video/upload"
                    accept="video/mp4"
                    :data="uploadVideoDialog.video"
                    :on-change="onVideoChange"
                    :on-error="onUploadFail"
                    :limit="1"
                    :auto-upload="false">

                <el-button slot="trigger" size="small" type="primary" style="margin-right: 10px;">选取文件</el-button>
                <el-button size="small" type="success" @click="uploadVideo">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传 MP4 文件，且不超过5G</div>

            </el-upload>
        </div>
    </el-dialog>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            video: {},
            uploadVideoDialog: {
                show: false,
                video: {duration: 0},
                fileList: []
            }
        },
        methods: {
            loadVideo: function (page = 1) {
                let vue = this;

                let url = `/admin/resource/video/list?page=${page}&size=10`;
                axios.get(url).then(resp => {
                    vue.video = resp.data || {};
                });
            },
            showUploadVideoDialog: function () {
                this.uploadVideoDialog.show = true;
                this.uploadVideoDialog.video = {duration: 0};
            },
            hideUploadVideoDialog: function (done) {
                this.uploadVideoDialog.show = false;
                this.$refs.videoUploader.clearFiles();

                if (done && typeof done === 'function') {
                    done();
                }
            },
            onVideoChange: function (file, fileList) {
                let vue = this;

                const isVideo = file.raw.type === 'video/mp4';
                const isLt5G = file.size / 1024 / 1024 / 1024 < 5;

                if (!isVideo) {
                    this.$message.error('上传视频只能是 MP4 格式!');
                    fileList.pop();
                } else if (!isLt5G) {
                    this.$message.error('上传视频不能超过 5GB!');
                    fileList.pop();
                } else {
                    vue.uploadVideoDialog.fileList = fileList;

                    //获取视频的时长
                    let audio = new Audio(URL.createObjectURL(file.raw));
                    audio.addEventListener("loadedmetadata", function (_event) {
                        vue.uploadVideoDialog.video.duration = audio.duration; //单位：秒
                    });
                }
            },
            uploadVideo: function () {
                this.$refs.videoUploader.submit();
            },
            onUploadFail: function (err, file, fileList) {
                this.$message.error('出错了哦，请稍后重试');
            },
            viewResource: function (res) {
                if (res.url) {
                    window.open(res.url);
                }
            },
            deleteResource: function (res) {
                let vue = this;

                axios.delete('/admin/resource/' + res.id).then(resp => {
                    if (res.type === 'video') {
                        vue.loadVideo();
                    } else {
                        vue.loadImage();
                    }
                })
            }
        },
        mounted: function () {
            this.loadVideo();
        }
    })
</script>
</html>